<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      window.onload = function () {
        // 1.创建svg和rect元素
        let xmlns = 'http://www.w3.org/2000/svg'
        let svgEl = document.createElementNS(xmlns, 'svg')
        let rectEl = document.createElementNS(xmlns, 'rect')

        // 2.给svg和rect苏对象添加属性
        svgEl.setAttributeNS(null, 'version', '1.0')
        svgEl.setAttributeNS(null, 'width', 100)
        svgEl.setAttributeNS(null, 'height', 100)

        rectEl.setAttributeNS(null, 'width', 50)
        rectEl.setAttributeNS(null, 'height', 50)

        // 3.将rect添加到svg
        svgEl.appendChild(rectEl)
        document.body.appendChild(svgEl)
      }
    </script>
  </body>
</html>
